<template>
	<view class="accessories-use-item">
		<view class="accessories-name-number">
			<view class="accessories-name">{{accessoriesName}} x </view>
			<view class="accessories-number">{{number}}</view>
		</view>
		<view @click="changeUseState" v-if="localConfirmUse === 0" class="unused">使用完成</view>
		<image @click="changeUseState" v-else class="icon" src="../../static/image/accessories-use-item/finish.png">
		</image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				localConfirmUse: this.confirmUse
			};
		},
		props: {
			accessoriesName: {
				type: String,
				default: "配件名称"
			},
			number: {
				type: Number,
				default: 0
			},
			confirmUse: {
				type: Number,
				default: 0 // 0是未使用，1是已使用
			}
		},
		methods: {
			changeUseState() {
				console.log("点击修改配件使用状态");
				if(this.localConfirmUse == 1){
					this.localConfirmUse = 0
				}else if(this.localConfirmUse == 0){
					this.localConfirmUse = 1
				}
				console.log(this.localConfirmUse);
				this.$emit("changeUseAccessoriesState", this.localConfirmUse, this.accessoriesName);
			}
		}
	}
</script>

<style lang="scss">
	.accessories-use-item {
		margin: 20rpx;
		height: 70rpx;
		align-items: center;
		padding: 10rpx;
		font-weight: 600;
		color: white;
		border-radius: 10rpx;
		border: 2rpx solid #9a9a9a;
		display: flex;
		justify-content: space-between;
		background-color: #6c6c6c;

		.unused {
			background-color: #ffb612;
			padding: 5rpx 20rpx;
			border-radius: 10rpx;

			&:active {
				background-color: #ffca2b;
			}
		}


		.accessories-name-number {
			display: flex;

			.accessories-number {
				margin-left: 10rpx;
			}
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
		}

	}
</style>
